<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>04_class与style绑定</title>
  <style>
    .red {
      color: red
    }

    .green {
      color: green
    }
  </style>
</head>

<body>
  <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

  <div id="app">
    <h2>1. class绑定: :class='xxx'</h2>
    <!-- 样式固定不变 -->
    <p class="red">这是一段文字~</p>
    <!-- 样式是变化的 -->
    <!-- <p :class="isRed ? 'red' : 'green'">这是一段文字~</p> -->
    <p :class="{
      red: isRed,
      green: !isRed,
      aaa: true,
      bbb: true
    }">这是一段文字~</p>
    <p :class="[isRed ? 'red' : 'green', 'aaa', 'bbb', 'ccc']">这是一段文字~</p>
    <button @click="changeColor">改变颜色</button>

    <h2>2. style绑定</h2>
    <!-- 样式固定不变 -->
    <p style="color: green">这是一段文字~</p>
    <!-- 样式是变化的 -->
    <p :style="{ fontSize: size + 'px' }">这是一段文字~</p>
    <input type="text" placeholder="请输入字体大小" v-model="size" />
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /*
      在vue中写样式：
        固定不变的样式：建议直接用class写
        变化的样式：
          1. class
            - 字符串形式
              :class="xxx"
            - 对象形式
              :class="{ xxx: true }"
            - 数组形式
              :class="[xxx, yyy]"
          2. style
            :style="{ xxx: yyy }"
            其中xxx样式名必须采用小驼峰命名
    */
    new Vue({
      el: '#app',
      data: {
        isRed: true,
        size: 20
      },
      methods: {
        changeColor() {
          this.isRed = !this.isRed
        }
      }
    })

  </script>
</body>

</html>